@mixin flex-row-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

scroll-view {
	height: 100%;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
	clear: both;
}

.inline-block {
	display: inline-block;
}

.payment-container {
	box-sizing: border-box;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: $page-color-base;
}
.address-wrapper {
	border: 1px solid $ns-border-color-gray;
	padding: 30rpx 20rpx;
	line-height: 44rpx;
	min-height: 44rpx;
	position: relative;
	background: #fff
		url()
		bottom repeat-x;
	background-size: auto 4rpx;

	.iconlocation {
		position: absolute;
		top: 26rpx;
		left: 11rpx;
		font-size: 32rpx;
	}

	.address {
		margin: 0 0 0 30rpx;

		.name {
			float: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 460rpx;
		}

		.tel {
			float: right;
		}
	}

	.address-detail {
		margin-top: 10rpx;
		color: $ns-text-color-gray;
		white-space: nowrap;
		max-width: 668rpx;
		display: inline-block;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
}

.address-empty {
	display: flex;
	padding: 32rpx 20rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	background: #fff
		url()
		repeat-x bottom/auto 4rpx;

	.add-address-icon {
		width: 80rpx;
		height: 80rpx;
		display: inline-block;
		background: url()
			center no-repeat;
		background-size: contain;
		margin-right: 20rpx;
		vertical-align: middle;
	}

	text {
		flex: 1;
	}
}

.goods-wrap {
	background-color: #fff;
	padding: 0 20rpx 20rpx;
	margin-top: 20rpx;

	.goods-item {
		margin-left: 0;
		width: auto;
		padding: 20rpx 0 0 0;
		position: relative;
		border-bottom: 0 !important;
		display: flex;
		flex-wrap: wrap;
	}
	.goods-img {
		-webkit-box-flex: 0;
		flex: none !important;
		width: auto;
		img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
			display: block;
		}
	}
	.goods-info {
		flex: 1;
		.goods-name {
			font-weight: normal;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			line-height: 1.3;

			.gift-mark {
				font-size: 24rpx;
				color: #fff;
				border-radius: 6rpx;
				margin-right: 10rpx;
				display: inline-block;
				line-height: 32rpx;
				padding: 0 4rpx;
			}
		}
		.sku-name {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			font-size: $ns-font-size-base;
			line-height: 1;
			padding-top: 10rpx;
		}
	}
	.goods-buy-info {
		-webkit-box-flex: 0;
		flex: none !important;
		width: auto;
		.price {
			margin-left: 20rpx;
			text-align: right;
			line-height: 40rpx;

			.unit {
				font-size: $ns-font-size-sm;
			}
			.point {
				font-size: $ns-font-size-sm;
			}
		}
		.tail-money {
			font-size: $ns-font-size-base;
			line-height: 1.5 span {
				display: inline-block;
			}
		}
		.buy-num {
			text-align: right;
			font-size: $ns-font-size-sm;
		}
	}
}
.order-list {
	&.option-item {
		margin-top: 20rpx;
	}
	@include flex-row-center;
	border-bottom: 1px solid $ns-border-color-gray;
	padding: 20rpx;
	min-height: 92rpx;
	background-color: #fff;
	box-sizing: border-box;
	font-size: $ns-font-size-base;
	.order-name {
		display: flex;
		flex-direction: column;
		justify-content: center;
		white-space: nowrap;
	}
	.order-desc {
		display: flex;
		flex-direction: column;
		text-align: right;
		font-size: $ns-font-size-sm;
		margin-left: auto;
		margin-right: 6rpx;
		white-space: nowrap;
		padding: 0;
		text {
			font-size: $ns-font-size-sm;
		}

		.coupon-mark {
			padding: 4rpx 8rpx;
			font-size: 24rpx;
			color: $base-color;
			border: 1rpx solid $base-color;
			border-radius: 6rpx;
			display: inline-block;
			line-height: 1;
			margin-right: 6rpx;
		}
	}
	.iconfont {
		font-size: $ns-font-size-lg;
	}
}

.buy-section {
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #fff;
	
	.money-item {
		@include flex-row-center;
		text:last-of-type {
			font-size: $ns-font-size-base;
		}
		text:first-of-type {
			font-size: $ns-font-size-base;
		}

		.payment-mode {
			.f-radio {
				margin-left: 20rpx;

				.iconfont {
					font-size: 32rpx;
					margin-right: 6rpx;
				}
				.iconyuan_checked {
					color: $base-color;
				}
				.iconyuan_checkbox {
					color: $ns-text-color-gray;
				}
			}
		}
	}
	.total-price {
		text-align: right;
		text:first-of-type {
			font-size: $ns-font-size-lg;
			font-weight: bold;
		}
	}
	.submit-order-btn {
		margin-top: 40rpx;
	}
}
.padding-bottom{
		padding-bottom: 68rpx!important;
	}
.popup-content {
	background: #fff;

	.popup-header {
		position: relative;
		overflow: hidden;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #f5f5f5;

		.iconfont {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.popup-body {
		background: #fff;

		// 支付方式
		.pay-type-list {
			padding: 0 40rpx;

			.pay-type-item {
				padding: 20rpx 0;
				height: 40rpx;
				line-height: 40rpx;
				box-sizing: content-box;
				border-bottom: 1px solid $ns-border-color-gray;
				font-size: 12px;

				.iconfont {
					float: left;
					margin-right: 10rpx;
					font-size: 32rpx;
					line-height: 40rpx;
				}
				.iconyuan_checked {
					color: $base-color;
				}
				.iconyuan_checkbox {
					color: $ns-text-color-gray;
				}
			}
		}

		// 优惠券列表
		.coupon-list {
			width: 100vw;
			height: 60%;

			.coupon-wrapper {
				padding: 0 20rpx;

				.coupon-item {
					position: relative;
					margin: 30rpx 0;
					padding-left: 60rpx;

					& > .iconfont {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 10rpx;
						font-size: 32rpx;
					}
					.iconyuan_checked {
						color: $base-color;
					}
					.iconyuan_checkbox {
						color: $ns-text-color-gray;
					}
					.coupon-info {
						position: relative;
						border-radius: 12rpx;
						border-top: 12rpx solid $base-color;
						border-bottom: 20rpx solid #fff;
						background: #fff;
						padding: 20rpx 20rpx 0;
						box-shadow: -4rpx 0 16rpx #ccc;

						.coupon-left-view {
							float: left;
							position: relative;
							width: 210rpx;
							height: 140rpx;
							margin-right: 20rpx;
							text-align: center;

							.at-last {
								margin-top: 10rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: bottom;
								color: $base-color;
							}
						}

						.coupon-right-view {
							float: left;
							position: relative;
							width: calc(100% - 230rpx);
							height: 160rpx;

							.iconfont {
								display: inline-block;
								margin-right: 10rpx;
							}

							.limit {
								height: 100rpx;
							}
							.time-limit {
								font-size: 24rpx;
								color: $ns-text-color-gray;
							}
						}

						strong {
							font-weight: 700;
							font-size: 90rpx;
							position: relative;
							top: 2rpx;
							line-height: 1;
							color: $base-color;
						}
					}
				}
			}
		}

		.delivery-wrapper {
			width: 100vw;
			height: calc(100vh - 278rpx);
			background: $ns-bg-color-gray;

			.title {
				height: 80rpx;
				line-height: 80rpx;
				position: relative;
				padding-left: 20rpx;
				font-weight: normal;
				font-size: 28rpx;
				margin-bottom: 0;
				background: #fff;

				.iconfont {
					display: inline-block;
					margin-right: 10rpx;
				}
			}

			.shipping-type-list {
				padding: 0 0 10rpx 20rpx;
				background: #fff;

				.type-item {
					display: inline-block;
					margin: 0 20rpx 20rpx 0;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
					border: 1rpx solid;
					border-radius: 6rpx;
					border-color: $ns-border-color-gray;

					&.active {
						color: $base-color;
						border-color: $base-color;
					}
				}
			}

			.panel {
				background: #fff;
				margin-top: 20rpx;
				background: #fff;
				// display: none;

				.panel-title {
					margin: 0 20rpx 0;
					height: 90rpx;
					line-height: 90rpx;
					font-weight: 400;
					font-size: 28rpx;
					border-bottom: 1px solid $ns-border-color-gray;
				}

				.list {
					margin: 0 20rpx;

					.item {
						position: relative;
						padding: 20rpx 0 20rpx 60rpx;
						border-bottom: 1px solid $ns-border-color-gray;

						.iconfont {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 10rpx;
							font-size: 32rpx;
						}
						.iconyuan_checked {
							color: $base-color;
						}
						.iconyuan_checkbox {
							color: $ns-text-color-gray;
						}
						.iconwritefill {
							right: 20rpx;
							left: unset;
							color: $ns-text-color-gray;
						}

						&:last-child {
							border-bottom: none;
						}
						&.no-poadding-left {
							padding-left: 0;
						}
					}
				}
			}
		}

		.shipping-time-wrapper {
			width: 100vw;
			height: 35vh;
			background: #fff;

			.tit {
				padding: 20rpx 20rpx 0 20rpx;
			}

			.time-list {
				padding-bottom: 20rpx;
			}

			.time-list view {
				width: 30vw;
				height: 68rpx;
				border-radius: 4px;
				font-size: 24rpx;
				line-height: 68rpx;
				text-align: center;
				margin-left: 2.5vw;
				margin-top: 12rpx;
				float: left;
				display: inline-block;

				&.active {
					background: $base-color;
					color: #fff;
				}
			}
		}

		.invoice-wrapper {
			width: 100vw;
			height: calc(100vh - 278rpx);
			background: $ns-bg-color-gray;

			.available-invoice {
				padding: 28rpx 20rpx;
				background: #fff;
				position: relative;

				switch {
					float: right;
				}
			}

			.invoice-form {
				background: #fff;
				padding: 0 20rpx;
				margin-top: 20rpx;

				.form-item {
					box-sizing: content-box;
					border-bottom: 1px solid $ns-border-color-gray;
					display: flex;
					height: 90rpx;

					&:last-child {
						border-bottom: none;
					}

					.form-label {
						line-height: 90rpx;
						margin-right: 20rpx;
					}

					.f-cont {
						flex: 1;
						input {
							flex: 1;
							height: 64rpx;
							font-size: 24rpx;
							padding: 0 20rpx;
							margin: 14rpx 0 14rpx 10rpx;
							box-sizing: border-box;
						}
					}

					.f-radio {
						line-height: 90rpx;
						margin-right: 30rpx;

						.iconfont {
							font-size: 32rpx;
							margin-right: 10rpx;
						}
						.iconyuan_checked {
							color: $base-color;
						}
						.iconyuan_checkbox {
							color: $ns-text-color-gray;
						}
					}
				}
			}
		}
	}

	.popup-footer {
		padding: 20rpx 20rpx 88rpx;
		height: 80rpx;
		box-sizing: content-box;
		background:#fff;
	}
}
